const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  //模式
  //可选值有两个：development(开发模式) production(生产模式)
  //development 不会压缩混淆代码，打包速度更快
  //production： 会压缩混淆代码,打包速度更慢
  mode:'development',
  //入口：可以使用相对路径
  entry: './src/main.js',
  //出口：必须使用绝对路径
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  //loader
  module: {
    rules: [
      {
        //test告诉webpack识别文件的类型(一般使用正则类型编写)
        //use改用什么loader去解析
        //loader的编写有顺序，从右到左的加载
        //i:ignore忽略大小写
        //g：global全局
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/i,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      //webpack5内置了 assets moudle 资源模块 可以简化我们对图片/字体等媒体资源的加载
      //图片不需要额外安装loader,直接设置type就够了
      {
        test: /\.(png|jpg|gif|jpeg)$/i,
        type: 'asset'
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/i,
        //type:'asset' 默认处理 小于8kb 转成base64大于8kb直接复制到dist文件夹下
        //type:'asset/resource' 统一不要转base64 格式，全部直接复制到dist文件夹下
        type: 'asset/resource',
        //生成器：告诉webpack这类文件放在哪里
        generator: {
          //[]webpack 内置的变量,都具有特殊含义
          //[name]表示源文件名
          //[hash]生成一段随机字符串
          //[ext]原后缀名
          filename: 'font/[name].[hash:6][ext]'
        }
      },
      {
        //匹配js文件
        test: /\.m?js$/,
        //exclude 排除 node_modules下所有的包都排除,以提高性能
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }

    ],
  },

  //插件
  plugins: [
    //html 插件会帮我们自动复制 html
    //template 配置的作用就是告诉插件去哪里
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],
  devServer:{
    port:3000,//修改端口号
    open:true//自动打开
  }
}